<template>
    <div class='video-detail'>
        <public-head>
            <span>视频详情</span>
        </public-head>
        <div class="video-area">
            <video :src="detailInfo.video" width="100%" height="210" controls preload="auto" x-webkit-airplay="true" playsinline webkit-playsinline="true" x5-video-player-type="h5" ref="video"></video>
        </div>
        <!--poster="http://192.168.11.11:7171/image/agent_contract/23ed141e-a2b8-47c0-9a89-e7b295bd3f01.jpg"-->
        <div class="explain">
            <div class="head">
                <h2>{{ detailInfo.title }}</h2>
                <div>
                    <p>{{detailInfo.datePub}}
                        <em v-if="detailInfo.chargeType">（可免费观看前{{ detailInfo.freeViewTime }}分钟）</em>
                    </p>
                    <span @click="buy" v-if="detailInfo.chargeType">购买(￥{{detailInfo.price}})</span>
                </div>
            </div>
            <div class="content">
                <p>{{ detailInfo.intro }}
                </p>
            </div>
        </div>
        <div class="relate-product">
            <h2>相关产品</h2>
            <ul class="case-list">
                <li v-for="(product,index) in detailInfo.productList" :key="product.id">
                    <a :href="product.url">
                        <div class="left">
                            <img :src="product.img">
                        </div>
                        <div class="right">
                            <h2 class="title">{{ product.name }}</h2>
                            <p class="introduce">{{ product.intro.substr(0,40) }}</p>
                        </div>
                    </a>
                </li>
            </ul>
        </div>
        <!--问题弹窗-->
        <div class="alert" v-show="showAlert">
            <div class="main">
                <h2>提示</h2>
                <p>是否付费观看该视频?</p>
            </div>
            <div class="btn">
                <button type="button" @click="showAlert = false">取消</button>
                <button type="button" @click="buy()">确认</button>
            </div>
        </div>
        <transition name="fade">
            <overlay v-if="showAlert"></overlay>
        </transition>
        <loading v-if="is_loading"></loading>
        <toast v-if="toast">
            <p slot="text">{{toastText}}</p>
        </toast>
    </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import wx from 'weixin-js-sdk'
export default {
    data() {
        return {
            detailInfo: {}, // 视频详情
            showAlert: false
        }
    },
    created() {
        this.fetchData()
    },
    methods: {
        fetchData() {
            this.isLoading(true)
            this.axios.post(root + '/api/industry/videoDetail', { token: this.token,id: this.$route.params.id }).then((res) => {
                this.isLoading(false)
                this.detailInfo = res.data.data
                this.judgeV()
            })
        },
        judgeV() {
            var v = this.$refs.video
            var _this = this
            // 需要支付 1 收费 0 免费 
            if (_this.detailInfo.chargeType) {
                v.addEventListener('timeupdate', function () {
                    if (Math.floor(v.currentTime) >= Number(_this.detailInfo.freeViewTime) * 60) { // 
                        v.pause()
                        _this.showAlert = true
                        // 弹框去支付
                    }
                }, true)
            }
        },
        buy() {
            // 调用微信支付接口
            // 判断是否绑定没有绑定跳转到绑定 绑定了调用支付接口
            this.isLoading(true)
            this.axios.post(root + '/api/customer/isBind', { token: this.token }).then((res) => {
                this.isLoading(false)
                res.data.data.isBind ? this.wx_pay() : (this.Toast('请先进行账号绑定', () => {
                    this.$router.replace('/bindaccount')
                }))
            })
        },
        wx_pay() {
            let _this = this;
            this.axios.post(root + '/api/weixin/toPay', { token: this.token, id: _this.$route.params.id }).then((res) => {
                WeixinJSBridge.invoke('getBrandWCPayRequest', res.data.data.param
                    , function (res) {
                        WeixinJSBridge.log(res.err_msg);
                        if (res.err_msg == "get_brand_wcpay_request:ok") {
                            // 跳转到支付成功页面
                            _this.fetchData()
                        } else if (res.err_msg == "get_brand_wcpay_request:cancel") {
                            // 订单在但是未支付
                            alert('取消支付')
                        } else {
                            // 支付失败
                            alert('支付失败')
                        }
                    })
            })
        },
        ...mapActions(['isLoading'])
    },
    computed: {
        ...mapState(['toast', 'toastText', 'is_loading', 'token'])
    }
}
</script>

<style lang="less" scoped>
@import '../../../common/style/mixin.less';
.video-detail {
    .init;
    .explain {
        padding: 0 .3rem;
        background: #fff;
        .head {
            padding: .35rem 0;
            .bor1px;
            h2 {
                .ft(0.28rem);
                color: #222;
                font-weight: 700;
                margin-bottom: 0.21rem;
            }
            div {
                .layout-between;
                align-items: flex-end;
                p {
                    display: inline-block;
                    .ft(0.2rem);
                    color: #999;
                }
                span {
                    .ft(0.24rem);
                    padding: 0.03rem 0.21rem;
                    color: #fff;
                    line-height: 0.45rem;
                    .br;
                    background: #5b91fe;
                    box-shadow: 0 2px 5px 0 rgba(91, 144, 254, 0.50);
                    vertical-align: baseline;
                }
            }
        }
        .content {
            padding: 0.15rem 0;
            .ft(0.24rem);
            color: #404040;
            line-height: 0.44rem;
        }
    }
    .relate-product {
        &>h2 {
            .ft(0.28rem);
            color: #5b91fe;
            font-weight: 700;
            padding: 0.32rem 0.3rem;
        }
        .case-list {
            li a {
                display: -webkit-flex;
                background: #fff;
                padding: .24rem .29rem;
                box-shadow: 0 3px 5px 0 #d0d0d0;
                margin-bottom: .2rem;
                .left {
                    .wh(1.52rem,
                    1.52rem);
                    margin-right: .29rem;
                    img {
                        .wh(100%,
                        100%);
                        border-radius: 2px;
                    }
                }
                .right {
                    flex: 1;
                    .ft(.24rem);
                    .title {
                        width: 5rem;
                        color: #404040;
                        margin-bottom: .18rem;
                        margin-top: .1rem;
                        .textoverflow;
                    }
                    .introduce {
                        color: #999;
                        line-height: .45rem;
                    }
                }
            }
        }
    }
}

.alert {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    padding-top: 0.3rem;
    .br;
    z-index: 1000000;
    min-width: 5rem;
    .main {
        padding: 0 0.3rem;
        h2 {
            .ft(0.28rem);
            font-weight: 700;
            color: #222;
            line-height: 0.55rem;
            .tc;
        }
        p {
            line-height: 1.4;
            margin: 0.3rem 0;
            text-align: center;
        }
    }
    .btn {
        .layout-center;
        width: 100%;
        height: 0.8rem;
        .ft(0.28rem);
        color: #5b91fe;
        .tc;
        border-top: 1px solid #d0d0d0;
        overflow: hidden;
        button {
            flex: 1;
            line-height: 0.8rem;
            .tc;
            &:first-child {
                border-right: 1px solid #d0d0d0;
            }
            &:last-child {
                color: #5b91fe;
            }
        }
    }
}
</style>